Hace unos días me preguntaban sobre una forma de dar estilo a caracteres especiales más conocidos como Unicode y es muy sencillo si utilizamos la etiqueta span de la que ya hablamos en otra ocasión.
Este carácter ► para mostrarlo tendríamos que escribir lo siguiente ►
Si utilizamos la etiqueta span de esta forma:
<span style="vertical-align: middle; color:#990000; font-size:20px;">►</span>
Tendríamos este resultado ►
Es tan sencillo como pensar el color y tamaño que deseamos darle, añadir los estilos y antes del cierre de la etiqueta span añadir el carácter que vamos a utilizar.
☀ ♬ ☎ ❁ ❧ ®
Impresionante lo que se puede hacer con solo código sin necesidad de subir imágenes y alentar la carga de una página web.
Gem@ en esta recta final te deseamos suerte en el concurso 20blogs y te apoyamos desde nuestra Web.
Enlace
Saludos!!!
Hola Gema, me alegra saludarte de nuevo, hace tiempo que no lo hacía.
Queria preguntarte una cosita, estoy "jugando" con este "truqui" y por más que le cambio el tamaño no consigo que el caracter me salga más grande ... que torpona soy ....
Un beso
Marga
Lo he puesto en la última entrada que tengo editada, "La Trenza de Hojaldre"
Gracias!!!
Marga
Gemita... algun link con el detalle de los caracteres (codigo y su respectiva imagen)??????
Gracias!!
Verás hay una comilla que se ha colado dónde no debía, ha sido error mío, lo tienes así:
<span style="vertical-align: middle; color:#000000;" font-size:150px;>✿</span>
Esa comilla doble que hay después del color debe ir al final:
<span style="vertical-align: middle; color:#000000; font-size:150px;">✿</span>
Lamento mucho que perdieras en tiempo por mi error
Jejeje... genial Gema.
Nunca se me habría ocurrido jugar con los colores y la fuente... me falta explotar mi creatividad
En Vagabundia JMiur hizo una buena recopilación y muchos ni los conocia... y si me permites Gema... le dejo a Jaime los enlaces:
Parte 1
Parte 2
Un abrazo.!
El sitio al que derivo a Jaime y que hay en la entrada es ese mismo de Vagabundia
Ya tá Gema !!!!!!!!!!
Hay que ver lo que hacen unas "comillas" jajaja
Gracias a tí por tu tiempo para los novatillos.
Besos,
Marga
Siempre muy atenta Gem@, y ahora un amigo mas, gracias Felipe, un abrazo desde Perú
No sabía cómo agrandar los caracteres, lo hacía con grande, más grande jajaja
Menos mal que estás ahí con los truquitos!
Besitos Juli
Hola GEM@!
muy interesante y util este truco,queria preguntarte porque no me sale en la pagina principal,solo en las entradas individuales me explico?
muchas gracias!
Si quieres prueba añadiendo los estilos en la plantilla de esta forma:
.unicode{
color: #990000;
vertical-align: middle;
font-size: 26px;
}
y en la entrada:
<span class="unicode">Aquí añadimos el carácter</span>
Perdon Gem@!!!pero el error fue mio lo habia puesto abajo de todo de la entrada,y no recorde que tengo el leer mas!!ahora si aparece en la entrada principal!!
muchisimas gracias y disculpas!!
Excelente Gema! y si les agregas sombra parecera que los sacaste de photoshop jaja, yo usaré unos de números que encontré aquí:
http://www.alanwood.net/unicode/dingbats.html
ideales para los pasos
Si, veo sombras por todos lados Gemita ♫ y no estoy loca, no estoy loca solo estoy
esesperada
jaja, te imaginas Gema, ser tan adicta al CSS que se quiera hacer el ♥ con el:
body{
background:#FB0101 url(bed.gif);
background-repeat: repeat !important;
text-align: center;
}
.post{
margin: 0px;
display: inline;
}
.post-body img{
vertical align: middle;
float:none;
}
Nota: solo los miembros de este blog pueden publicar comentarios.